<template>
    <div class="header" :class="layout+'-header'">
        <div class="navigation" v-if="layout === 'vertical'">
            <div class="icon" @click="isCollapse().updateisCollapse(!collapse)">
                <el-icon size="22" v-if="collapse">
                    <Expand />
                </el-icon>
                <el-icon size="22" v-else>
                    <Fold />
                </el-icon>
            </div>
            <el-breadcrumb separator=">">
                <el-breadcrumb-item v-for="(item, index) in breadcrumbList().list" :key="index" :to="getPath(item)"
                    @click="breadcrumbClick(item, index)">
                    <el-icon v-if="item.icon">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <el-icon v-else>
                        <Menu />
                    </el-icon>
                    {{ item.title }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="toolbar">
            <div v-for="(item, index) in toolList" :key="index" @click="item.event" class="tool">
                <i class="toolbarIcon iconfont" v-if="item.icon" :class="item.icon" :style="{'color':iconColor}">
                </i>
            </div>
            <div class="userName">
                <span :style="{ 'color': iconColor }">{{ userInfo().data.userName }}</span>
            </div>
            <div class="photo">
                <el-popover placement="bottom" :teleported="false" :width="90" trigger="click" popper-class="photo_popper">
                    <template #reference>
                        <img :src="userInfo().data.photoPath ? url + '/' + userInfo().data.photoPath : defaultImage" alt="">
                    </template>
                    <template #default>
                        <div class="userinfoBox">
                            <div @click="userDialogShow=true">
                                <el-icon :size="12">
                                    <User />
                                </el-icon>
                                <span>个人资料</span>
                            </div>
                            <div>
                                <el-icon :size="12">
                                    <Edit />
                                </el-icon>
                                <span>修改密码</span>
                            </div>
                            <div>
                                <el-icon :size="12">
                                    <SwitchButton />
                                </el-icon>
                                <span>退出登录</span>
                            </div>
                        </div>
                    </template>
                </el-popover>
            </div>
        </div>
        <Search :isShow="searchShow" @close="close"></Search>
        <userInfoCom :isShow="userDialogShow" @close="userDialogShow=false"></userInfoCom>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { isCollapse, breadcrumbList, menuInfo, userInfo } from "@/store/pinia";
import { pageSet } from '@/store/pinia';
import Search from "@/components/header/Search.vue";
import userInfoCom from "./userInfo.vue";
import defaultImage from '@/assets/avatar.gif'
import logo from "@/assets/logo.png";
const collapse = computed(() => isCollapse().isCollapse)
const getPath = (data) => {
    if (data.children) {
        // breadcrumbList().updateLastList(data.children[0])
        return { path: data.children[0].path }
    }
    return { path: data.path }
}
const breadcrumbClick = (data, index) => {
    judgeChildren(data)
}
const judgeChildren = data => {
    if (data.children) { //有子元素默认选择第一个
        judgeChildren(data.children[0])
        breadcrumbList().updateLastList(data.children[0])
        menuInfo().updateMenuName(data.children[0].index);
        menuInfo().updatePath(data.children[0].path);
    } else {
        breadcrumbList().updateLastList(data)
        menuInfo().updateMenuName(data.index);
        menuInfo().updatePath(data.path);
    }
}
/* 布局切换 */
const layout = computed(()=> pageSet().layoutComponent.menuMode)
/* 工具栏事件 */
const toolClick = () => {
    pageSet().updateisUnfold(true)
}
/* 工具栏事件 --> 搜索框 */
let searchShow = ref(false)
const close = () => { searchShow.value = false }
const searchClick = () => {
    searchShow.value = true
}
//切换工具栏图标颜色
const iconColor = computed(() => {
    return pageSet().layoutComponent.menuMode !== 'vertical' ? '#fff' : '#333'
})
/* 工具栏按钮 */
const toolList = [
    { icon: 'icon-pifu1', event: toolClick },
    { icon: 'icon-sousuo', event: searchClick },
    { icon: 'icon-tongzhi', event: '' },
    { icon: 'icon-fullscreen-expand', event: '' },
]
const url = process.env.VUE_APP_STATIC_URL //服务器静态资源地址
const userDialogShow = ref(false)
</script>
<style scoped lang="scss">
.header {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.horizontal-header{
    background-color: var(--horizontal-header-bgcolor);
    width: 300px;
    padding: 15px;
}
.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon {
        cursor: pointer;
    }
}

::v-deep .el-breadcrumb {
    margin-left: 10px;

    .el-breadcrumb__inner:hover {
        color: var(--isActive-color);
        font-weight: 600;
    }
}

::v-deep .el-icon {
    vertical-align: top;
}

.toolbar {
    width: 300px;
    display: flex;
    justify-content: left;
}

.toolbarIcon {
    padding: 10px;
    display: flex;
    align-items: center;
}

.iconfont {
    font-weight: 600;
    font-size: 21px;
    cursor: pointer;
}

.icon-sousuo {
    position: relative;
    top: 1px;
}

.userName {
    padding: 10px;
    display: flex;
    align-items: center;

    span {
        font-size: 18px;
    }
}

.photo {
    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 10px;
        cursor: pointer;
    }
}

::v-deep .photo_popper {
    min-width: 0px !important;
    padding: 0 !important;
}

.userinfoBox {
    width: 100%;
    height: 100%;

    div {
        font-size: 12px;
        padding: 8px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            margin-left: 5px;
        }
    }
}

.userinfoBox>div:hover {
    cursor: pointer;
    background-color: var(--isActive-color-05);
}
</style>
